<template>
  <el-page-header
    :icon="ArrowLeft"
    title="返回"
    class="page-header"
    @back="handleGo"
  >
    <template #content>
      <span class="text-large font-600 mr-3"> 订单详情 </span>
    </template>
  </el-page-header>
  <div class="details-re">
    <div class="name">
      <span>姓名:</span>
      <span>{{ orderDetails.name }}</span>
    </div>
    <div class="name">
      <span>手机号:</span>
      <span>{{ orderDetails.phone }}</span>
    </div>
    <div class="name">
      <span>订单1:</span>
      <span>{{ orderDetails.oredrgood1 }}</span>
    </div>
    <div class="name">
      <span>订单2:</span>
      <span>{{ orderDetails.oredrgood2 }}</span>
    </div>
    <div class="name">
      <span>订单3:</span>
      <span> {{ orderDetails.oredrgood3 }}</span>
    </div>
    <div class="name">
      <span>支付:</span>
      <span> {{ orderDetails.payment }}元</span>
    </div>
    <div class="name">
      <span>日期</span>
      <span> {{ orderDetails.date }}</span>
    </div>
  </div>
</template>

<script setup>
import "../../../mock/orderMock";
import axios from "axios";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
let router = useRouter();
let route = useRoute();
let handleGo = () => {
  router.go(-1);
};
// 详情
let id = ref("");
id.value = route.params.id;
let orderDetails = ref({});
onMounted(() => {
  axios.post("/api/record/details", { id: id.value }).then((res) => {
    orderDetails.value = res.data;
  });
});
</script>

<style scoped lang="scss">
.page-header {
  background: rgb(242, 242, 242);
  height: 85px;
  margin-top: -20px;
  padding-left: 20px;
  .text-large {
    line-height: 85px;
  }
}
.details-re {
  display: flex;
  flex-direction: column;
  height: 450px;
  justify-content: space-around;
  padding-left: 50px;
  background-color: aliceblue;
  .name{
    display: flex;
    width: 200px;
    justify-content: space-around;
    text-align: left;

    span{
        height: 40px;
        width: 100px;
        // border: 1px solid #000;
        line-height: 40px;
    }
    span:nth-child(1){
        color: burlywood;
    }
    span:nth-child(2){
        color: burlywood;
    }
    
  }
}
</style>